<template>
  <div class="media_personal">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <van-icon name="arrow-left" class="left_btn" @click="$router.go(-1)"/>
      <span>个人空间</span>
      <div v-if="!($store.state.device === 'APP' || $store.state.gsign === 'qxym')" class="btn_right">
        <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
        <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
        <a href="/media-news">
          <img src="../../../assets/img/modules/media/icon_25.png" alt="">
        </a>
      </div>
    </div>
    <div :class="$store.state.device !== 'APP'?'banner_user' : 'banner_user app_nav'">
      <img class="bg_gs_img" :src="userData.avatar" alt="">
      <div class="bg_gs"></div>
      <div class="user_img">
        <div class="user_name">
          <img :src="userData.avatar" alt="">
          <img v-if="userData.isV !== 1" class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
          <h3>
            {{userData.userNickName}}
            <p v-if="userData.isV !== 1">优质行业计划签约者</p>
          </h3>
        </div>
        <button :class="userData.isConcerned !== 1 ? 'active':''" @click="setAttention(userData.userId, userData)">{{userData.isConcerned !== 1?'已关注':'关注'}}</button>
      </div>
      <p>{{userData.description}}</p>
    </div>
    <div class="number_list">
      <div class="number_item">
        <strong>{{userData.followCount?userData.followCount:0}}</strong>
        <p>关注</p>
      </div>
      <div class="number_item">
        <strong>{{userData.fansCount?userData.fansCount:0}}</strong>
        <p>粉丝</p>
      </div>
    </div>
    <van-tabs @click="openTab" color="#027FFE" title-active-color="#027FFE" line-width="35">
      <van-tab title="全部" name="a">
        <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad">
          <div v-for="(item, index) in articleList" :key="index" class="articleList">
            <!-- 是大V 没有图片 -->
            <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount === 0" class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 是大V 一张图片 -->
            <div v-if="item.isV === 2 && item.imageCount === 1"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
                <img :src="item.images[0]" alt="">
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 是大V 多张图片 -->
            <div v-if="item.isV === 2 && item.imageCount > 1" class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <div class="img_list">
                    <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  </div>
                </div>
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 是大V 视屏 -->
            <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount !== 0" class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
                </div>
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 不是大V 没有图片 -->
            <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount === 0"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
            <!-- 不是大V 一张图片 -->
            <div v-if="item.isV === 1 && item.imageCount === 1"   class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
                <img :src="item.images[0]" alt="">
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
            <!-- 不是大V 多张图片 -->
            <div v-if="item.isV === 1 && item.imageCount > 1"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <div class="img_list">
                    <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  </div>
                </div>
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
            <!-- 不是大V 视屏 -->
            <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount !== 0"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
                </div>
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
          </div>
          <!--加载状态-->
          <div v-if="loading" class="item_v2_index_news item_v2_index_news_active"><van-skeleton title :row="5" :loading="loading"/></div>
          <div  v-if="footerShow" class="no_data_title">
            <img src="../../../assets/img/modules/media/icon_v2_4.png" alt="">
            <p>暂无资源~</p>
          </div>
        </van-list>
      </van-tab>
      <van-tab title="文章" name="b">
        <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad">
          <div v-for="(item, index) in articleList" :key="index" class="articleList">
            <!-- 是大V 没有图片 -->
            <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount === 0" class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 是大V 一张图片 -->
            <div v-if="item.isV === 2 && item.imageCount === 1"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
                <img :src="item.images[0]" alt="">
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 是大V 多张图片 -->
            <div v-if="item.isV === 2 && item.imageCount > 1" class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <div class="img_list">
                    <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  </div>
                </div>
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 不是大V 没有图片 -->
            <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount === 0"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
            <!-- 不是大V 一张图片 -->
            <div v-if="item.isV === 1 && item.imageCount === 1"   class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                </div>
                <img :src="item.images[0]" alt="">
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
            <!-- 不是大V 多张图片 -->
            <div v-if="item.isV === 1 && item.imageCount > 1"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-detail?id=' + item.post.id" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <div class="img_list">
                    <img :src="item.images[0] ? item.images[0] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[1] ? item.images[1] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                    <img :src="item.images[2] ? item.images[2] : 'http://m.oucgz.cn/icon_v2_3.png'" alt="">
                  </div>
                </div>
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
          </div>
          <!--加载状态-->
          <div v-if="loading" class="item_v2_index_news item_v2_index_news_active"><van-skeleton title :row="5" :loading="loading"/></div>
        </van-list>
        <div  v-if="footerShow" class="no_data_title">
          <img src="../../../assets/img/modules/media/icon_v2_4.png" alt="">
          <p>暂无文章资源~</p>
        </div>
      </van-tab>
      <van-tab title="视频" name="c">
        <van-list
            v-model="loading"
            :finished="finished"
            @load="onLoad">
          <div v-for="(item, index) in articleList" :key="index" class="articleList">
            <!-- 是大V 视屏 -->
            <div v-if="item.isV === 2 && item.imageCount === 0 && item.videoCount !== 0" class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
                </div>
              </a>
              <div class="footer_body">
              <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
                <div class="right_body">
                  <div class="item_span"><i class="iconfont icon-icon-test"></i>{{item.seeCount ? item.seeCount : 0}}</div>
                  <div class="item_span"><i class="iconfont icon-pinglun"></i>{{item.commentsCount ? item.commentsCount : 0}}</div>
                  <div :class="item.idCompliment !== 1 ?'item_span active': 'item_span'" @click="setLike(item.post.id, item)"><i class="iconfont icon-dianzan1"></i>{{item.extidCount ? item.extidCount : 0}}</div>
                </div>
              </div>
            </div>
            <!-- 不是大V 视屏 -->
            <div v-if="item.isV === 1 && item.imageCount === 0 && item.videoCount !== 0"  class="item_v2_index_news item_v2_index_news_active">
              <a :href="'/media-video?id=' + item.post.id + '&videoUrl=' + item.videos" class="text_body">
                <div class="right_text">
                  <p>{{item.post.postTitle}}</p>
                  <img class="video_img" src="../../../assets/img/modules/media/icon_v2_1.png" alt="">
                </div>
              </a>
              <div class="footer_body">
                <div class="right_body_no_v">
                  <div class="item_span">{{item.seeCount ? item.seeCount : 0}} 浏览</div>
                  <div class="item_span">{{item.commentsCount ? item.commentsCount : 0}} 评论</div>
                  <div class="item_span">{{item.extidCount ? item.extidCount : 0}} 点赞</div>
                </div>
                <div class="topic_btn" v-if="item.postTag > 0"><a href="javascript:;" @click="$router.push({ path:'/media-topic', query:{ id: item.postTag }})">#{{item.postTagName}}</a></div>
              </div>
            </div>
          </div>
          <!--加载状态-->
          <div v-if="loading" class="item_v2_index_news item_v2_index_news_active"><van-skeleton title :row="5" :loading="loading"/></div>
          <div  v-if="footerShow" class="no_data_title">
            <img src="../../../assets/img/modules/media/icon_v2_4.png" alt="">
            <p>暂无视频资源~</p>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
    <div  v-if="footerShowNo" class="no_data_title">
      <p>没有更多了</p>
    </div>
  </div>
</template>
<script>
import debounce from 'lodash/debounce'
import mediaMixins from '@/utils/modules/media'
export default {
  mixins: [mediaMixins],
  name: 'media_personal',
  components: {},
  data () {
    return {
      activeTab: 'a',
      userData: {
        avatar: 'http://css.gzedu.com/qy_oucnet_com/wx_img/1_ico_26.png',
        description: '',
        fansCount: 0,
        followCount: 0,
        isConcerned: 0,
        userId: 0,
        user_name: '',
        userNickName: ''
      },
      footerShowNo: false, // 没有跟多
      loading: false, // 上拉加载
      finished: false, // 上拉加载
      footerShow: false, // 底部标志显示
      articleId: 0, // 当前分类ID
      articleList: [], // 全部文章列表
      current: 1, // 当前页
      size: 5 // 每页条数
    }
  },
  props: {},
  watch: {
    '$route' (val) {
      history.go(0)
    }
  },
  methods: {
    openTab (val) {
      this.current = 1
      this.activeTab = val
      this.articleList = []
      this.loading = true
      if (this.activeTab === 'a') {
        this.getList(0)
      }
      if (this.activeTab === 'b') {
        this.getList(1)
      }
      if (this.activeTab === 'c') {
        this.getList(2)
      }
    },
    /*
     *@author wf_Huang
     *@Time 2019/8/14 0014 16:39
     *@function  获取个人用户信息
     *****************************************/
    getUserData () {
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpusers/getById?openId=${this.$store.state.openid}&userId=${this.$route.query.id}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('用户信息查询失败~')
          return false
        }
        this.userData = res.data
      }).catch(() => {})
    },
    onLoad: debounce(function () {
      if (this.activeTab === 'a') {
        this.getList(0)
      }
      if (this.activeTab === 'b') {
        this.getList(1)
      }
      if (this.activeTab === 'c') {
        this.getList(2)
      }
    }, 100, { 'leading': true, 'trailing': false }),
    /*
     *@author wf_Huang
     *@Time 2019/8/14 0014 16:57
     *@function 获取全部数据
     *****************************************/
    getList (index) {
      this.finished = false
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpposts/getPostsByUserId?current=${this.current}&size=${this.size}&openid=${this.$store.state.openid}&userId=${this.$route.query.id}&type=${index}`,
        method: 'get',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('全部列表查询失败~')
          return false
        }
        if (res.data.length < this.size) {
          if (this.current === 1 && res.data.length === 0) {
            this.footerShow = true
            this.footerShowNo = false
          } else {
            this.footerShow = false
            this.footerShowNo = true
          }
          this.finished = true
        } else {
          this.footerShowNo = true
          this.footerShow = false
        }
        this.sarchActive = false
        res.data.forEach(item => {
          this.articleList.push(item)
        })
        this.loading = false
        this.current = this.current + 1
      }).catch(() => {})
    }
  },
  computed: {},
  created () {
  },
  mounted () {
    document.querySelector('body').setAttribute('style', 'background-color:#F6F6F6')
    this.getUserData()
  },
  destroyed () {
    document.querySelector('body').removeAttribute('style')
  }
}
</script>
<style lang="scss" scoped>
  .media_personal {
    .nav_top_list{
      z-index: 99;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 32px;
        color: #181818;
        font-weight: bold;
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          img{
            width: 36px;
            height: 34px;
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .banner_user{
      width: 750px;
      height: 420px;
      background-size: 100%;
      padding: 60px 32px;
      margin: 100px auto 0;
      position: relative;
      overflow: hidden;
      z-index: 0;
      .bg_gs,.bg_gs_img{
        width: 150%;
        height: 200%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
        background-color: rgba(0, 122, 255, 0.7);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        filter: blur(10px);
      }
      .user_img{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .user_name{
          display: flex;
          align-items: center;
          position: relative;
          img{
            width: 140px;
            height: 140px;
            border-radius: 140px;
            margin-right: 30px;
          }
          .v_img{
            width: 45px;
            height: 45px;
            z-index: 9;
            position: absolute;
            top: 100px;
            left: 90px;
          }
          h3{
            font-size: 36px;
            color: #FFFFFF;
            p{
              font-size: 24px;
              color: #FFFFFF;
              margin: 0;
              font-weight: normal;
            }
          }
        }
        button{
          border: 2px solid #FFFFFF;
          border-radius: 4px;
          width: 120px;
          height: 54px;
          font-size: 24px;
          color: #FFFFFF;
          background-color: transparent;
        }
      }
      p{
        font-size: 24px;
        color: #FFFFFF;
        margin: 40px 0;
        line-height: 40px;
      }
    }
    .number_list{
      padding: 0 0 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #ffffff;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      margin-top: -50px;
      position: relative;
      z-index: 2;
      .number_item{
        flex: 1;
        text-align: center;
        strong{
          font-size: 38px;
          color: #222222;
        }
        p{
          font-size: 26px;
          color: #666666;
          margin: 10px 0;
        }
      }
    }
    .item_news{
      padding: 32px 32px 20px;
      border-bottom: 15px solid #f6f6f6;
      background-color: #ffffff;
      &:last-child{
        border: 0;
      }
      .top_img{
        display: flex;
        font-size: 32px;
        color: #222222;
        align-items: center;
        margin-bottom: 20px;
        img{
          width: 70px;
          height: 70px;
          border-radius: 70px;
          box-shadow: 0 0 5px rgba(0,0,0,0.1);
          margin-right: 20px;
        }
      }
      .text_body{
        display: flex;
        img{
          width: 218px;
          height: 164px;
          border-radius: 4px;
          margin-left: 20px;
        }
        .right_text{
          display: flex;
          flex-direction: column;
          align-content: space-between;
          justify-content: space-between;
          h5{
            font-size: 32px;
            color: #222222;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 0;
            line-height: 45px;
          }
          p{
            font-size: 28px;
            color: #666666;
            margin: 5px 0;
            line-height: 35px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }
          .img_list{
            display: flex;
            img{
              width: 218px;
              height: 164px;
              &:first-child{
                margin: 0;
              }
            }
          }
        }
      }
      .footer_body{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .time_body{
          font-size: 24px;
          color: #999999;
          a{
            font-size: 24px;
            color: #027FFE;
            margin-right: 20px;
          }
        }
        .right_body{
          font-size: 24px;
          color: #999999;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .item_span{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: 30px;
            margin-left: 10px;
            img{
              margin-right: 5px;
            }
            &:nth-child(1){
              img{
                width: 28px;
                height: 28px;
              }
            }
            &:nth-child(2){
              img{
                width: 30px;
                height: 28px;
              }
            }
            &:nth-child(3){
              img{
                width: 30px;
                height: 26px;
              }
            }
          }
        }
      }
    }
    .item_video{
      padding: 32px 32px 20px;
      border-bottom: 15px solid #f6f6f6;
      background-color: #ffffff;
      &:last-child{
        border: 0;
      }
      .top_img{
        display: flex;
        font-size: 32px;
        color: #222222;
        align-items: center;
        margin-bottom: 20px;
        img{
          width: 70px;
          height: 70px;
          border-radius: 70px;
          box-shadow: 0 0 5px rgba(0,0,0,0.1);
          margin-right: 20px;
        }
      }
      .text_body{
        display: flex;
        .right_text{
          display: flex;
          flex-direction: column;
          align-content: space-between;
          justify-content: space-between;
          h5{
            font-size: 32px;
            color: #222222;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin: 0;
            line-height: 45px;
          }
        }
        .video_body{
          width: 686px;
          height: 346px;
          position: relative;
          margin-top: 10px;
          .video_bg{
            width: 686px;
            height: 346px;
          }
          .video_play{
            background-color: rgba(0,0,0,0.6);
            width: 110px;
            height: 110px;
            border-radius: 110px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            .video_btn{
              width: 33px;
              height: 45px;
              position: absolute;
              left: 55%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      .footer_body{
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .time_body{
          font-size: 24px;
          color: #999999;
          a{
            font-size: 24px;
            color: #027FFE;
            margin-right: 20px;
          }
        }
        .right_body{
          font-size: 24px;
          color: #999999;
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .item_span{
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            height: 30px;
            margin-left: 10px;
            img{
              margin-right: 5px;
            }
            &:nth-child(1){
              img{
                width: 28px;
                height: 28px;
              }
            }
            &:nth-child(2){
              img{
                width: 30px;
                height: 28px;
              }
            }
            &:nth-child(3){
              img{
                width: 30px;
                height: 26px;
              }
            }
          }
        }
      }
    }
    .footer_title{
      margin: 100px auto;
      text-align: center;
      img{
        width: 594px;
        height: 71px;
      }
    }
  }
</style>
